<template>
  <div class="hot-search" v-if="searchData">
    <a-table
      :dataSource="searchData"
      :columns="columns"
      :pagination="{ style: { marginBottom: 0 }, pageSize: 5 }"
      size="small"
      rowKey="id"
    >
      <h4 href="#/" slot="name" slot-scope="name">{{ name }}</h4>
      <span slot="search_num" slot-scope="search_num">{{ search_num }} </span>
    </a-table>
  </div>
</template>

<script>
const columns = [
  {
    title: '排名',
    dataIndex: 'index',
    key: 'index',
    customRender: (text, record, index) => index + 1,
  },
  {
    title: '商品',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '销售数量',
    dataIndex: 'sold_num',
    key: 'sold_num',
    sorter: (a, b) => a.sold_num - b.sold_num,
  },
  {
    title: '搜索次数',
    dataIndex: 'search_num',
    key: 'search_num',
    scopedSlots: { customRender: 'search_num' },
  },
];

export default {
  name: 'HotSearch',
  props: ['searchData'],
  data() {
    return {
      columns,
    };
  },
};
</script>

<style lang="less" scoped>
.num-info {
  .title {
    color: @text-color-second;
    font-size: 14px;
    height: 22px;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
  }
  .value {
    .total {
      color: @title-color;
      display: inline-block;
      line-height: 32px;
      height: 32px;
      font-size: 24px;
      margin-right: 32px;
    }
    .subtotal {
      color: @text-color-second;
      font-size: 16px;
      vertical-align: top;
      margin-right: 0;
      i {
        font-size: 12px;
        color: red;
        transform: scale(0.82);
        margin-left: 4px;
      }
    }
  }
}
</style>
